<!-- 重复字段详情 -->
<template>
  <div class="detail-index-content">
    <Modal
      v-model="modalValue"
      title="新增/编辑菜单"
      footer-hide
      width="960px"
      @on-cancel="cancel"
    >
      <Form ref="formData" :rules="ruleValidate" :model="formData">
        <Row :gutter="30">
          <Col span="12">
            <FormItem label="菜单/按钮名称" prop="menuName">
              <div style="width: 100%">
                <Input v-model="formData.menuName" placeholder="请输入"></Input>
              </div>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="类型" prop="type">
              <RadioGroup v-model="formData.type">
                <Radio label="Menu">菜单</Radio>
                <Radio label="Button">按钮</Radio>
              </RadioGroup>
            </FormItem>
          </Col>
          <Col span="12">
              <FormItem label="是否显示" prop="isShow">
                <RadioGroup v-model="formData.isShow">
                  <Radio label="true">显示</Radio>
                  <Radio label="false">隐藏</Radio>
                </RadioGroup>
              </FormItem>
            </Col>
          <Col span="12">
            <FormItem label="排序号" prop="orderNumber">
              <InputNumber
                style="width: 100%"
                v-model="formData.orderNumber"
                placeholder="请输入"
              ></InputNumber>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="页面参数" prop="pageParam">
              <Input
                v-model="formData.pageParam"
                placeholder="请输入菜单标识"
              ></Input>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="PC关键字" prop="pageKey">
              <Input
                v-model="formData.pageKey"
                placeholder="请输入PC关键字"
              ></Input>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="APP关键字" prop="appPageKey">
              <Input
                v-model="formData.appPageKey"
                placeholder="请输入APP关键字"
              ></Input>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="APP标识">
              <Input
                v-model="formData.appPageKey"
                placeholder="请输入菜单标识"
              ></Input>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="路由地址">
              <Input
                v-model="formData.routePath"
                placeholder="请输入路由地址"
              ></Input>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="路由名称">
              <Input
                v-model="formData.routeName"
                placeholder="请输入路由名称"
              ></Input>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="组件地址">
              <Input
                v-model="formData.componentPath"
                placeholder="请输入组件地址"
              ></Input>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="图标设置">
              <i-icon-select
                v-model="formData.icon"
                clearable
                placeholder="请设置一个图标"
                search
                show-title
                :icon-list="iconList"
              />
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="备注信息">
              <Input
                v-model="formData.remark"
                placeholder="请输入备注信息"
              ></Input>
            </FormItem>
          </Col>
        </Row>

        <Row type="flex" justify="space-between">
          <Col>
            <Button
              type="primary"
              :loading="isLoading"
              @click="handleSubmit('formData')"
              >保存</Button
            >
          </Col>
        </Row>
      </Form>
    </Modal>
  </div>
</template>

<script type="text/javascript">
import {
  addMenu, // 添加菜单
  getMenuTree, // 获取菜单
} from "@/api/system.js";

import iconList from "@/libs/icon-list";

export default {
  name: "changeBeforeAfter",
  components: {},
  props: {
    echoData: {
      type: Object,
      default: () => {},
    },
    isHide: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      formData: {
        permissionMenuId: "",
        menuName: "",
        parentId: "0",
        pageKey: "",
        appPageKey: "",
        icon: "",
        pageParam: "",
        remark: "",
        type: "Menu",
        orderNumber: 0,
        ownType: "",
        routePath: "",
        routeName: "",
        componentPath: "",
        isShow:"true"
      },
      ruleValidate: {
        menuName:[
        {
            required: true,
            message: "请输入菜单名称",
            trigger: "change",
          },
        ],
        isShow:[
        {
            required: true,
            message: "请选择是否隐藏",
            trigger: "change",
          },
        ],
      },
      modalValue: false,
      isLoading: false,
      iconList,
    };
  },
  methods: {
    cancel() {
      this.$emit("update:updateIsHide", false);
    },
    async addMenuAction() {
      this.isLoading = true;
      try {
        let data = await addMenu(this.formData);
        this.isLoading = false;
        this.$Message.success("添加成功！");
        this.$emit("actionSuccess")
      } catch (error) {
        this.isLoading = false;
      }
    },
    handleSubmit(name) {
      console.log(name, "name");
      this.$refs[name].validate((valid) => {
        console.log(valid, "name", this.$props.echoData);
        if (valid) {
          this.addMenuAction();
        }
      });
    },
  },
  created() {
    this.formData.parentId = this.$props.echoData.parentId;
    this.formData.ownType = this.$props.echoData.ownType;
    this.modalValue = this.$props.isHide;
  },
};
</script>

<style lang="less" scoped>
.ivu-radio-group {
  width: 100%;
}
</style>
